<template lang="">
    <div>
        <el-table :data="list" ref="form" style="width: 100%" @row-click="rowClick" highlight-current-row height="300"
            class="list" v-loading="loading">
            <el-table-column prop="quedataCourse" label="课程名">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        name: 'CourseList',
        data() {
            return {
                list: [
                    /* {
                        quedataCourse: '123'
                    },
                    {
                        quedataCourse: '123456'
                    }, */
                ],
                activeTeacher: -1,
                loading: false
            }
        },
        props: ['conId'],
        methods: {
            rowClick(currentRow) {                   //选中课程后，请求该课程相关的问卷结果
                this.$bus.$emit('courseShowing', currentRow)   //发往(状态展示)
                axios({
                    method: 'GET',
                    url: '/QueResultChart/queryQueData',
                    withCredentials: true,
                    params: {
                        quedataConid: this.conId,
                        teaNum: this.activeTeacher,
                        quedataCourse: currentRow.quedataCourse
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    this.$bus.$on('teacherSelected', result.data)    //让请求到的数据与选老师的结果走同一条处理，发往(数据展示)
                    this.$bus.$emit('courseShowing', currentRow)   //发往(状态展示)
                }).catch((err) => {
                    this.$message({
                        message: '查询结果失败' + err.message,
                        type: 'info'
                    });
                });
            },
            getCourseList(currentRow) {
                this.loading = true
                this.$refs.form.setCurrentRow([]);      //选中教师后清除选中高亮
                axios({
                    method: 'GET',
                    url: '/QueResultChart/queryCourse',
                    withCredentials: true,
                    params: {
                        quedataConid: this.conId,
                        teaNum: currentRow.teaNum
                    },
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then((result) => {
                    //处理result，将result放入template中的列表
                    console.log('请求课程列表', result);
                    this.list = result.data
                    this.loading = false
                }).catch((err) => {
                    this.$message({
                        message: '查询课程列表失败' + err.message,
                        type: 'info'
                    });
                    this.loading = false
                });
            }
        },
        mounted() {
            if (this.$route.query.questionnaireType == 1) {
                this.$bus.$on('teacherShowing', (currentRow) => {      //选中教师后，请求该教师下的课程
                    this.activeTeacher = currentRow.teaNum      //提供给查询该教师下的课程的结果使用
                    this.getCourseList(currentRow)
                })
                this.$bus.$on('selectAll', () => {     //选择全部后清除高亮
                    this.$refs.form.setCurrentRow([]);
                })
            }
        },
        beforeDestroy() {
            this.$bus.$off('teacherShowing')
            this.$bus.$off('selectAll')
        },
    }
</script>
<style scoped>
    .list {
        cursor: pointer;
    }
</style>